<template>
  <div class="boxsty">
    <div>

      <el-row>
                    <el-col :span="24">
                      <el-form :model="dataForm" label-width="120px" label-position="right">
                        <div  v-show="searchadvanced">
                        <el-col :span="24">

                          <el-col  :span="12">
                            <el-form-item label="任务名称">
                              <el-input :disabled='true' v-model="dataForm.renwuName"
                                        placeholder="任务名称"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="审核流程">
                              <el-select :clearable="true" v-model="dataForm.splc" placeholder="请选择审核流程"
                                         style="width:100%;" :disabled='true'
                                         class="xiaLa">
                                 <el-option v-for="(item,index) in lcspList" :key="index" :label="item.name" :value="item.value"></el-option>
                              </el-select>
                            </el-form-item>
                          </el-col>
                        </el-col>
                        <el-col :span="24">

                          <el-col :span="6">
                            <el-form-item label="签订日期">
                              <el-date-picker
                                v-model="dataForm.signdate"
                                style="width:100%;"
                                :disabled='true'
                                type="date"
                                placeholder="选择日期">
                              </el-date-picker>
                            </el-form-item>
                          </el-col>
                          <el-col :span="6">
                            <el-form-item label="签订级别">
                              <el-select :clearable="true" v-model="dataForm.signlevel" placeholder="请选择签订级别"
                                         style="width:100%;" :disabled='true'
                                         class="xiaLa">
                                <el-option v-for="(item,index) in qdjbList" :key="index" :label="item.name" :value="item.value"></el-option>
                              </el-select>
                            </el-form-item>
                          </el-col>
                        </el-col>
                        <el-col :span="24">
                          <el-col :span="6">
                            <el-form-item label="多人合同模式">
                              <el-select :clearable="true" v-model="dataForm.multimode" placeholder="请选择多人合同模式"
                                         style="width:100%;" :disabled='true'
                                         class="xiaLa">
                                <el-option v-for="(item,index) in drhtmsList" :key="index" :label="item.name" :value="item.value"></el-option>
                              </el-select>
                            </el-form-item>
                          </el-col>
                          <el-col :span="6">
                            <el-form-item label="任务周期">
                              <el-select :clearable="true" v-model="dataForm.renwucycle" placeholder="请选择考核周期"
                                         style="width:100%;" :disabled='true'
                                         class="xiaLa">
                                   <el-option v-for="(item,index) in htzqList" :key="index" :label="item.name" :value="item.value"></el-option>
                              </el-select>
                            </el-form-item>
                          </el-col>

                        </el-col>
                        </div>

                      </el-form>
                    </el-col>
                  </el-row>
      <div class="flex" style="margin-bottom:20px;justify-content: space-between;" v-if="this.type==5">
        <div>
          <el-button type="primary"  @click="saveZBData">保存</el-button>
          <el-button type="primary"  @click="deleteBatch()">批量删除</el-button>
          <el-button type="primary"  @click="exportExcel()">导出</el-button>
          <el-button type="primary"  @click="fnBackLastPage('关闭')">返回</el-button>
        </div>
      </div>

      <div class="kaohe-table-box-title">考核任务</div>
      <div class="kaohe-table-box">
        <table v-model="dataForm">
<!--          表头-->
          <thead>
          <tr>
            <th colspan="6" class="text-left">
              <div>
                <span>被考核人姓名:</span>
                <span>{{ dataForm.bkhName }}</span>
              </div>
            </th>
            <th rowspan="2" colspan="6">
              <div class="text-center">
                考核周期：{{dataForm.khzq}}
              </div>
            </th>
          </tr>
          <tr>
            <th colspan="6" class="text-left">
              <span>职务:</span>
              <span>{{ dataForm.bkhZhiwu }}</span>
            </th>
          </tr>
          <tr>
            <th rowspan="2">
<!--              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>-->
              <input type="checkbox" v-model="checkAll" id="allid" @click="handleCheckAllChange">
            </th>
            <th rowspan="2">序号</th>
            <th rowspan="2">任务名称</th>
            <th colspan="2" class="text-center">难度系数</th>
            <th rowspan="2">权重设置%</th>
            <th rowspan="2">工作目标/成效</th>
            <th rowspan="2">数据提供部门/人</th>
            <th rowspan="2">提供人名称</th>
            <th rowspan="2">评分人</th>
            <th rowspan="2">指标状态</th>
            <th rowspan="2">
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="fnAddData"></el-button>
            </th>
          </tr>
          <tr>
            <th>重要程度</th>
            <th>完成难度</th>
          </tr>
          </thead>
<!--          数据-->
          <tbody>
           <tr v-for="(item,index) in dataForm.dataList">
             <td class="text-center"><input type="checkbox" v-model="selectData" name="mycheckbox" :value="item.id"></td>
            <td style="width: 50px" class="text-center">{{index+1}}</td>
            <td>
              <span>{{ item.taskName }}</span>
            </td>
            <td>
              <el-select v-model="item.zycd" placeholder="请选择重要程度">
                <el-option
                  v-for="item in chengduList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-select v-model="item.wcnd" placeholder="请选择完成程度">
                <el-option
                  v-for="item in chengduList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-input-number v-model="item.weightset" :max="100" :min="0" placeholder="请输入权重设置"></el-input-number>
            </td>
            <td>
              <el-input v-model="item.workTarget" placeholder="请输入工作目标/成效"></el-input>
            </td>
            <td>
                <span v-if="item.tgLx=='2'">{{item.targetUserName}}</span>
                <span v-else>{{item.dataProvider}}</span>
<!--              <span>{{ item.dataProvider }}</span>-->
            </td>
            <td>
              <span>{{ item.providerName }}</span>
            </td>
            <td>
              <div class="flex">
                <el-input v-model="item.pingfenren" placeholder="请输入评分人"></el-input>
                <el-button type="primary" @click="selectpingfenren(item,index)">选择评分人</el-button>
              </div>
            </td>
            <td>
              <span>{{ auditStatusText[item.auditStatus] }}</span>
            </td>
            <td>
              <el-button type="danger" icon="el-icon-minus" size="mini" @click="fnDelData(item,index)"></el-button>
            </td>
          </tr>
          <tr >
            <td colspan="12">
              <div>
                说明：<br>
                1. 重要程度高，是指重点任务对集团层面有重要影响；<br>
                2. 重要程度较高，是指重点任务对公司层面有重要影响；<br>
                3. 重要程度一般，是指重点任务对部门层面有重要影响；<br>
                4. 完成难度高，是指重点任务创新性强、协调难度大；<br>
                5. 完成难度较高，是指重点任务有一定创新性、需要争取政策支持；<br>
                6. 完成难度一般，是指重点任务有一定难度，但有专业团队支持，本部门能够独立承担工作。
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
<!--      按钮-->
      <!-- <div class="flex mg-t40 text-center" style="justify-content: space-around;"> -->
        <el-button v-if="this.type==1" type="primary" @click="saveDetail">确认#</el-button>
      <el-col :span="24" style="text-align:center;margin-top:20px;" v-if="this.type==5">
        <el-button type="primary" @click="tongguo(2)">同意</el-button>
        <el-button type="primary" @click="tongguo(1)">驳回</el-button>
      </el-col>
<!--        <el-button type="primary" @click="piliangVisible=true">批量维护#</el-button>-->
        <!-- <el-button type="primary" @click="fnBackLastPage(2)">返回#</el-button> -->
      <!-- </div> -->
    </div>
    <!--  选择人员信息-->
    <renwufaqiusercomment v-if="renwufaqiusercomment" ref="renwufaqiusercomment" @submitfy="submitfy"></renwufaqiusercomment>
    <pingfenrenusercomment v-if="pingfenrenusercomment" ref="pingfenrenusercomment" @submitfypingfenren="submitfypingfenren"></pingfenrenusercomment>
    <!--    批量维护-->
    <el-dialog
      title="批量维护"
      :visible.sync="piliangVisible"
      width="30%"
      center>
      <div>
        <el-form :model="piliangForm" label-width="150px" >
          <el-form-item label="数据提供部门">
            <el-select v-model="piliangForm.bumen" placeholder="数据提供部门">
              <el-option label="部门1" value="1"></el-option>
              <el-option label="部门2" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="评分人">
            <el-select v-model="piliangForm.region" placeholder="评分人">
              <el-option label="评分人1" value="1"></el-option>
              <el-option label="评分人2" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="piliangVisible = false">确定#</el-button>
                <el-button @click="piliangVisible = false">关闭#</el-button>
            </span>
    </el-dialog>
    <el-dialog
      title="任务指标库"
      :visible.sync="renwuzhibiaodialogVisible"
      width="80%">
      <renwuzhibiaoTable ref="renwuzhibiaoRef" @func="getRow"></renwuzhibiaoTable>
      <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="addZhibiao">添 加</el-button>
                    <el-button @click="renwuzhibiaodialogVisible = false">取 消</el-button>
                </span>
    </el-dialog>
  </div>
</template>

<script>
// export default {
//   name: "zhongdian-kaoherenwu-table"
// }

import UserCommonSelect from '@/views/hetongrenwu/components/usercomment-select'
import renwufaqiusercomment from '@/views/hetongrenwu/components/renwufaqiusercomment-select.vue'
import renwuzhibiaoTable from '@/views/hetongrenwu/zhongdianrenwu/zhongdianrwcj/rwfqnew/renwuzhibiaoTable.vue'
import pingfenrenusercomment from '@/views/hetongrenwu/components/pingfenrenusercomment-select.vue'
import {updateOrSaveDetail,getDetailListdepid,jgtbExportExcel,sethtshStatus,deleteBatch} from '@/api/hetongrenwu/zhongdian/renwuchuangjian'

export default {
  components: {
    UserCommonSelect,
    renwufaqiusercomment,
    renwuzhibiaoTable,
    pingfenrenusercomment
  },
  props: {
    zhibiaoForm: {
      disabled: false
    },
    renwuId: Number
  },
  data() {
    return {
      checkAll: false,
      isIndeterminate: true,
      fzbmData: [],
      dataForm: {
        dataList:[],
        delList:[]
      },
      auditStatusText:{
        '0':'待审批',
        '1':'驳回',
        '2':'通过'
      },
      chengduList: [
        {name: '高', value: '高'},
        {name: '较高', value: '较高'},
        {name: '一般', value: '一般'}
      ],
      piliangVisible:false,
      usercomment: false,
      piliangForm:{},
      renwufaqiusercomment:false,
      renwuzhibiaodialogVisible:false,
      pingfenrenusercomment:false,
      rowindex:"",
      type:0,
      ids:[],
      searchadvanced: true,
       lcspList:[
        {name:'2021年全员绩效考核通用流程',value:'1'},
        {name:'2021年第一季度技术合同流程',value:'2'}
      ],
      qdjbList:[
        {name:'一级合同',value:'1'},
        {name:'二级合同',value:'2'},
        {name:'三级合同',value:'3'},
        {name:'四级合同',value:'4'},
        {name:'五级合同',value:'5'}
      ],
      drhtmsList:[
        {name:'多人共享成绩',value:'0'},
        {name:'生成多个合同',value:'1'}
      ],
      htzqList:[
        {name:'月度',value:'1'},
        {name:'季度',value:'2'},
        {name:'年度',value:'3'}
      ],
      selectData: [],
    }
  },
  watch: {
    selectData(newVal){
      this.checkAll=newVal.length==this.dataForm.dataList.length?true:false;
    }
  },
  methods: {
    //初始化
    csh() {
      this.dataForm = {
        dataList:[],
        delList:[]
      };
    },
    init(row,renwuId,renwuName,type,khzq) {
     //console.log(row)
      this.csh();
      this.type=type;
      this.dataForm.renwuId = renwuId;
      this.dataForm.renwuName = renwuName;
      this.dataForm.bkhId = row.bkhId;

      if(row.beikaoheName){
       //console.log(row.beikaoheName+"==---"+row.bkhName)
        this.dataForm.bkhName=row.beikaoheName;
        this.dataForm.bkhZhiwu=row.beikaoheZhiwu;
      }else{
        this.dataForm.bkhName=row.bkhName;
        this.dataForm.bkhZhiwu=row.bkhZhiwu;
      }
      this.dataForm.khzq = khzq;
      this.dataForm.splc = row.auditProcess;
      this.dataForm.signdate = row.signDate;
      this.dataForm.signlevel = row.signLevel;
      this.dataForm.multimode = row.multiMode;
      this.dataForm.renwucycle = row.renwuCycle;
      this.getDetailListdepid(renwuId,0,0)
    },
    getDetailListdepid(renwuId,bkhId,dpid){
      getDetailListdepid({renwuId:renwuId,bkhId:bkhId,type:this.type,dataProviderId:dpid}).then(response => {
        this.dataForm.dataList=response.data.data;
      })
    },
    //增加人员
    addUser() {
      this.renwufaqiusercomment = true;
      this.$nextTick(() => {
        this.$refs.renwufaqiusercomment.init('12');
      });
    },
    submitfy(data){
     },
    //添加表格数据
    fnAddData(){
      this.renwuzhibiaodialogVisible = true
      this.$nextTick(() => {
        this.$refs.renwuzhibiaoRef.getDataList()
      })
    },
    getRow(rows){
     //console.log(rows+"==rows111")
      for(var i=0;i<rows.length;i++){
        var isHaveData=this.dataForm.dataList.find(item=>item.taskName==rows[i].taskName);
        if(!isHaveData) {
          let objData = {};
          objData["id"] =0;
          objData["taskid"] =rows[i].id;
          objData["taskName"] = rows[i].taskName;
          objData["weightset"] = rows[i].weightset;
          objData["dataProviderId"] = rows[i].departId;
          objData["dataProvider"] = rows[i].departName;
          objData["providerId"] = rows[i].createUserId;
          objData["providerName"] = rows[i].createUserName;
          this.dataForm.dataList.push(objData);
        }
      }
      this.renwuzhibiaodialogVisible = false
      this.$forceUpdate();

    },
    addZhibiao(){
      this.$refs.renwuzhibiaoRef.saveZhibiao(2)
    },
    submitfypingfenren(data){
      var obj=this.dataForm.dataList[this.rowindex]
      obj["pingfenren"]=data.tableDataUser[0].userName;
      obj["pingfenrenId"]=data.tableDataUser[0].userId;
      this.$forceUpdate();
    },
    selectpingfenren(obj,index) {
      this.rowindex=index;
      this.pingfenrenusercomment = true;
      this.$nextTick(() => {
        this.$refs.pingfenrenusercomment.init('12');
      });
    },
    saveDetail(){
      updateOrSaveDetail(this.dataForm).then(res => {
        this.$emit('fnBackLastPage','返回原页面')
      })
    },
    saveZBData(){
      updateOrSaveDetail(this.dataForm);
    },
    //删除表格中的数据
    fnDelData(obj,index){
      this.dataForm.delList.push(obj);
      this.dataForm.dataList.splice(index, 1);
    },
    //返回上一个页面
    fnBackLastPage(type){
      this.$emit('fnBackLastPage','返回原页面')
    },
    //审批
    tongguo(myflag) {
      if(this.selectData.length==0){
        for(var i=0;i<this.dataForm.dataList.length;i++){
          this.selectData.push(this.dataForm.dataList[i].id)
        }
      }
      var ids=[];
      for(var i=0;i<this.selectData.length;i++){
        ids.push(this.selectData[i])
      }
     //console.log("ids==="+ids)
      this.$confirm('确认要操作吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return sethtshStatus(ids, myflag)
      }).then(data => {
        this.$message.closeAll();
        this.$message.success('操作成功')
        this.getDetailListdepid(this.dataForm.renwuId,0,0)
      })
    },
    deleteBatch(){
      if(this.selectData.length==0){
        this.$message.error("请至少选择一个指标！");
        return;
      }
      var ids=[];
      for(var i=0;i<this.selectData.length;i++){
        ids.push(this.selectData[i])
      }
      var idsStr=ids.join(',')
      this.$confirm('是否要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return deleteBatch({ids:idsStr})
      }).then(data => {
        this.$message.closeAll();
        this.$message.success('删除成功')
        this.getDetailListdepid(this.dataForm.renwuId,0,0)
      })
    },
    //导出
    exportExcel(){
      var ids=[];
      ids.push(this.dataForm.renwuId)
      var filename="";
      if(ids.length>1){
        filename="任务创建明细表.zip";
      }else{
        filename="任务创建明细表"+".xlsx";
      }

      jgtbExportExcel({
        ids:ids,
        type:'zbfm'
      }).then(response => {
        this.$message.success('导出成功!')
        let url = window.URL.createObjectURL(new Blob([response.data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", filename);
        document.body.appendChild(link);
        link.click();
      })
    },
    //全选
    handleCheckAllChange(val) {
      var ids=this.dataForm.dataList.map(item=>item.id)
      this.selectData = val ? ids : [];
    }

}
}
</script>

<style scoped>
.kaohe-table-box-title {
  border-bottom: solid 1px #0d217e;
}

.kaohe-table-box {
  margin-top: 20px;
}

.kaohe-table-box table {
  width: 100%;
}

.kaohe-table-box table tr td {
  border: solid 1px #ccc;
  padding: 10px;
}

.kaohe-table-box table tr th {
  border: solid 1px #ccc;
  padding: 5px
}
</style>
